<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/Mystyle.css">
</head>
<body>
<div id="nav">
    <div class="button">
        <input id="btn1" type="button" value="ONE" />
        <input id="btn2" type="button" value="TWO" />
        <input id="btn3" type="button" value="THREE" />
    </div>

</div>
<div id="div1">
    <h2>Welcome on <span>Spirit8</span></h2>
    <p>We are a digital agency with years of experience and with extraordinary people</p>
</div>
<div id="div2">
    <img id="img2" src="http://www.jq22.com/demo/jQueryMoban201710162217/img/02.png">
    <div class="about">
        <h4>ABOUT US</h4>
        <h2><strong>SOME WORDS ABOUT US</strong></h2>

        <div class="par">
            <p>We love building and rebuilding brands through our specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.<p>
        </div>
        <p><strong>Mission</strong> - We deliver uniqueness and quality</p>
        <p><strong>Skills</strong> - Delivering fast and excellent results</p>
        <p><strong>Clients</strong> - Satisfied clients thanks to our experience</p>
    </div>
</div>
<div id="div3">
    <div class="contain">
        <div class="title">MEET OUR TEAM</div>
        <div class="peo">
            <img src="http://www.jq22.com/demo/jQueryMoban201710162217/img/team/01.jpg">
            <div class="introduce"><h3>Jenn Gwapa</h3><br/>
                <a>CEO/Founder<br/></a>
                <p>Do not seek to change what has come before.Seek to create that which has not.</p>
            </div>
        </div>
        <div class="peo"><img src="http://www.jq22.com/demo/jQueryMoban201710162217/img/team/02.jpg">
        </div>
        <div class="peo"><img src="http://www.jq22.com/demo/jQueryMoban201710162217/img/team/03.jpg">
        </div>
        <div class="peo"><img src="http://www.jq22.com/demo/jQueryMoban201710162217/img/team/04.jpg">
        </div>
    </div>

</div>
</body>
<script src="js/顶部导航.js"></script>
<script>
    window.onload=function(){

        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var oBtn3=document.getElementById("btn3");
        oBtn1.onclick=function(){
            scrollTo(0,0);
        }


        /*oBtn2.onclick=function(){
            scrollTo(0,540);
            /*setInterval(function()
                {
                    scrollTo(0,500)
                },200);*/

        /*for(var i=1;i<500;i*10)不能用循环

      /*var elem = document.getElementById("div2");
      var height= 0;
      var id = setInterval(frame, 10);
      function frame() {
        if (height == 300) {
          clearInterval(id);
        }
        else {
          height++;
          elem.style.height = height + '%';
        }
      }
    }*/

        oBtn2.onclick=function down() {
            /*var d = setInterval(function () {
                window.scrollTo(start, start + scroDIST);
                start = start + scroDIST;

                var pheight = document.body.scrollHeight;//网页正文全文高
                if (start >= pheight) {
                    clearInterval(d);
                }
            }, stime);*/
            scrollTo(0,600);
        }

        oBtn3.onclick=function(){
            scrollTo(0,1140);
        }

    }
</script>
</html>
